<template>
    <div class="addArticle">
        <div class="title">
         <label>标题:</label><el-input v-model="title" style="width:200px;"></el-input>
        </div>
        <div class="postProstion">
         <label>投稿区一:</label>
         <el-cascader
            v-model="articalId"
            :options="options"
            @change="handleChange"></el-cascader>
        </div>
        <input type="file" @change="getBase" ref="file" accept=".jpg,.jpeg,.png"><br>
        <img class="corverImg" style="height:150px" v-if="prePostUserPic" :src="prePostUserPic" alt="">
        <Toolbar
            class="toolbar"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            class="editor"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
        <div class="btns">
            <el-button type="info" @click="saveIssue">保存草稿箱</el-button>
            <el-button type="success" @click="sendIssue">发布</el-button>
        </div>
    </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {getArtcateCates} from "@/api/artcate"
import {addDraft,addArticle} from "@/api/article"
import {YMDHMSMS} from "@/utils/format"
export default {
    components: { Editor, Toolbar },
    data() {
        return {
            title:"",
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: { },
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', // or 'simple'
            uid:-1,
            prePostUserPic:null,
            articalId:"",//投稿一区
            articalTwoId:"",//投稿二区
            options:[],
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        sendIssue(){
            console.log(this.title);
            console.log(this.html);
            var datestr = new Date().getTime()
            console.log(YMDHMSMS(datestr));
            console.log(this.articalId);
            var cate_pid = this.articalId[0]
            var author_id = this.uid
            var cate_id = this.articalId[1]
            var obj = {
                title:this.title,
                content:this.html,
                cover_img:this.prePostUserPic,
                pub_date:YMDHMSMS(datestr),
                state:1,
                cate_id,
                cate_pid,
                author_id,
            }
            addArticle(obj).then(res=>{
                console.log(res);
            })
        },
        async getArtCates(){
            let {data} = await getArtcateCates();
            var arrOne = []
            for (let index = 0; index < data.length; index++) {
                const element = data[index];
                for (let jndex = 0; jndex < element.children.length; jndex++) {
                    const item = element.children[jndex];
                    item.value = item.id;
                    item.label = item.name;
                    delete item.children;
                }
                element.value = element.id;
                element.label = element.name;
                arrOne.push(element)
            }
            this.options = arrOne;
        },
        getBase(){
            let blob= this.$refs.file.files[0];
            const a = new FileReader();
            a.readAsDataURL(blob);
            a.onload = (e) => {
                const base64 = e.target.result;
                this.prePostUserPic = base64;
            }
        },
        /**
         * 保存草稿箱
         */
        saveIssue(){
            // console.log(this.uid);
            console.log(this.html);
            // console.log(this.title);
            // console.log(this.articalId);
            // return
            var obj = {
                draftContent:this.html,
                userId:this.uid,
                draftTitle:this.title,
                prePostUserPic:this.prePostUserPic,
                articalCatePid:this.articalId[0],
                articalId:this.articalId[1],
            }
            addDraft(obj).then(res=>{
                console.log(res);
            })
        },
        /**
         * 一级搜索建议
         */
        querySearchOne(){
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
            return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleChange(){

        }
    },
    created(){
        this.uid = localStorage.getItem("uid")
        this.getArtCates()
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        setTimeout(() => {
            this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
        }, 1500)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
.title{
    height: 10vh;
    display: flex;
    align-items: center;
}
.addArticle{
    height: 100%;
    padding: 0 20px 20px;
}
.toolbar{
    height: 10vh;
}
.editor{
    height: 30vh;
    overflow-y: hidden;
    border: 1px solid #ccc;
}
.btns{
    display: flex;
    height: 10vh;
    align-items: center;
    margin-right: 20px;
    justify-content: flex-end;
}
.corverImg{
    margin: 20px;
}
</style>